<template>
  <el-tooltip
    :visible="rewardTootipVisible"
    :content="`已达添加上限${props.max}个`"
    placement="top-start"
  >
    <div
      class="button-tooltip-trigger"
      @mouseenter="handleRewardMouseenter"
      @mouseleave="handleRewardMouseleave"
      @click="handleClick"
    >
      <el-button
        type="primary"
        plain
        :disabled="props.length >= props.max"
      >
        <el-icon><Plus /></el-icon>
        <span>
            <slot></slot>
        </span>
      </el-button>
    </div>
  </el-tooltip>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

const props = defineProps({
    length: {
        type: Number,
        default: 0
    },
    max: {
        type: Number,
        default: 0
    }
});
const emit = defineEmits(['click']);
const rewardTootipVisible = ref(false);

const handleRewardMouseenter = () => {
    rewardTootipVisible.value = props.length >= props.max
}
const handleRewardMouseleave = () => {
    rewardTootipVisible.value = false
}

const handleClick = () => {
    if (props.length >= props.max) {
        return rewardTootipVisible.value = true
    }
    emit('click');
}

</script>
<style lang="scss" scoped>
.button-tooltip-trigger {
    display: inline-block;
}
:deep(.el-button.el-button--primary.is-plain:not(.is-disabled)) {
    --el-button-bg-color: #ffffff;
    --el-button-border-color: var(--el-color-primary);
    &:hover {
        color: var(--el-color-primary);
        border-color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-9);;
    }
    &:focus {
        color: var(--el-color-primary);
        background-color: var(--el-button-bg-color);
        border-color: var(--el-color-primary);
        outline: none;
    }
}
</style>
